<template>
  <div id="courseware" class="container">
    <div class="content">
      <div class="title_tab">
        <div class="title_item" :class="{title_active:menu == 1}" @click="selectTab(1)">课件授权管理</div>
        <div
          style="margin-left:0.3rem;"
          class="title_item"
          :class="{title_active:menu == 2}"
          @click="selectTab(2)"
        >授权校区管理</div>
        <div
          style="margin-left:0.3rem;"
          class="title_item"
          :class="{title_active:menu == 3}"
          @click="selectTab(3)"
        >授权班级管理</div>
      </div>
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-select
              style="width:12%;float: left;"
              v-model="searchData.campusId"
              clearable
              filterable
              placeholder="请选择校区"
            >
              <el-option
                v-for="item in campusList"
                :key="item.campusId"
                :label="item.name"
                :value="item.campusId"
              ></el-option>
            </el-select>
            <el-select
              style="width:12%;float: left;margin-left:0.1rem;"
              v-model="searchData.isUse"
              clearable
              v-if="menu == 3"
              placeholder="请选择使用状态"
            >
              <el-option
                v-for="item in userStatusList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-input
              v-if="menu != 1"
              style="width: 3.5rem;margin-left:0.1rem;"
              placeholder="搜索 课程名称"
              v-model="searchData.libraryCourseName"
              clearable
              class="input_search"
            ></el-input>
            <div class="search_btn" style="margin-left:0.1rem;" @click="tabledisplayChangePage(1)">搜索</div>
            <div class="btn_user_defined" style="margin-left:0.1rem;" @click="reset">重置</div>
            <div class="right_btn" v-if="menu == 1" @click="addAuth">添加授权</div>
          </div>
        </div>
        <div v-if="menu == 1">
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 4rem;">订单编号</td>
                <td style="width: 4rem;">订单时间</td>
                <td style="width: 4rem;">校区名称</td>
                <td style="width: 4rem;">服务期限</td>
                <td style="width: 4rem;">授权班级个数</td>
                <td style="width: 4rem;">创建人</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in courseauthorizeorderLisst">
                <td>{{item.authorizeOrderNo}}</td>
                <td>{{item.createTime}}</td>
                <td>{{item.campusName}}</td>
                <td v-if="item.isNoTime">无限期</td>
                <td v-else>{{item.serveStartTimeShow}}至{{item.serveEndTimeShow}}</td>
                <td class="line" @click="clickCampus(item)">{{item.authorizeClassAmount}}</td>
                <td>{{item.createUserName}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-else-if="menu == 2">
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 2rem;">序号</td>
                <td style="width: 4rem;">校区名称</td>
                <td style="width: 4rem;">课程名称</td>
                <td style="width: 4rem;">授权班级个数</td>
                <td style="width: 4rem;">使用班级个数</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in librarycoursecampusList">
                <td>{{index+1}}</td>
                <td>{{item.campusName}}</td>
                <td>{{item.libraryCourseName}}</td>
                <td>{{item.authorizeClassAmount}}</td>
                <td>{{item.authorizeClassAmount-item.availableAuthorizeClassAmount}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-else-if="menu == 3">
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 2rem;">序号</td>
                <td style="width: 4rem;">使用班级</td>
                <td style="width: 4rem;">课程名称</td>
                <td style="width: 4rem;">使用校区</td>
                <td style="width: 4rem;">班级进度</td>
                <td style="width: 4rem;">使用状态</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in classcourseauthorizeList">
                <td>{{index+1}}</td>
                <td>{{item.className}}</td>
                <td>{{item.libraryCourseName}}</td>
                <td>{{item.campusName}}</td>
                <td>{{item.useCourseHour || 0}}/{{item.courseHourCount || 0}}</td>
                <td>{{item.isUse == '1'?"禁用":"正常"}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="searchData.currPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="searchData.total"
        ></el-pagination>
        <!-- 添加授权 -->
        <createCourseAuth ref="createCourseAuth" @callback="closeAdd"></createCourseAuth>
        <!-- 订单详情 -->
        <authDetails ref="authDetails"></authDetails>
      </div>
    </div>
  </div>
</template>

<script>
let vm;
let user;
import createCourseAuth from "./common/createCourseAuth";
import authDetails from "./common/auth_details";
export default {
  components: { createCourseAuth, authDetails },
  data() {
    return {
      menu: 1,
      searchData: {
        currPage: 1,
        total: 0,
        pageSize: 10,
        orgId: "",
        campusId: "",
        libraryCourseName: "",
        isUse: ""
      },
      campusList: [],
      userStatusList: [{name:"正常",value:1},{name:"禁用",value:0}],
      courseauthorizeorderLisst: [],
      librarycoursecampusList: [],
      classcourseauthorizeList: []
    };
  },
  watch: {},
  methods: {
    /**重置 */
    reset() {
      vm.searchData = {
        currPage: 1,
        total: 0,
        pageSize: 10,
        orgId: user.orgId,
        campusId: "",
        courseName: "",
        userStatus: ""
      };
      vm.initData();
    },
    /**添加授权 */
    addAuth() {
      this.$refs.createCourseAuth.init({});
      // this.$refs.authDetails.init({});
    },
    closeAdd(data) {
      vm.initData();
    },
    clickCampus(item) {
      this.$refs.authDetails.init(item);
    },
    initData() {
      if (vm.menu == 1) {
        api.courseauthorizeorderList(vm.searchData).then(function(data) {
          if (data.resultCode == 2000) {
            let campustemp = data.list;
            for (let i = 0; i < campustemp.length; i++) {
              campustemp[i].serveStartTimeShow = campustemp[i].serveStartTime
                ? campustemp[i].serveStartTime.split(" ")[0]
                : "";
              campustemp[i].isNoTime = campustemp[i].campusCooperationMode == 2;
              campustemp[i].serveEndTimeShow = campustemp[i].serveEndTime
                ? campustemp[i].serveEndTime.split(" ")[0]
                : "";
            }
            vm.courseauthorizeorderLisst = campustemp;
            vm.searchData.total = data.totalCount;
          } else {
            vm.$message.error(data.message);
          }
        });
      } else if (vm.menu == 2) {
        api.librarycoursecampusList(vm.searchData).then(function(data) {
          if (data.resultCode == 2000) {
            vm.librarycoursecampusList = data.list;
            vm.searchData.total = data.totalCount;
          } else {
            vm.$message.error(data.message);
          }
        });
      } else if (vm.menu == 3) {
         api.classcourseauthorizeList(vm.searchData).then(function(data) {
          if (data.resultCode == 2000) {
            vm.classcourseauthorizeList = data.list;
            vm.searchData.total = data.totalCount;
          } else {
            vm.$message.error(data.message);
          }
        });
      }
    },
    /**切换tab */
    selectTab(index) {
      vm.menu = index;
      vm.searchData = {
        currPage: 1,
        total: 0,
        pageSize: 10,
        orgId: user.orgId,
        campusId: "",
        courseName: "",
        userStatus: ""
      };
      vm.initData();
    },
    pageSizeChange(val) {
      vm.searchData.pageSize = val;
      vm.initData();
    },
    tabledisplayChangePage(val) {
      vm.searchData.currPage = val;
      vm.initData();
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    vm.searchData.orgId = user.orgId;
    api.campusListByOrg({ orgId: user.orgId }).then(function(data) {
      if (data.resultCode == 2000) {
        vm.campusList = data.list;
      } else {
        vm.$message.error(data.message);
      }
    });
    vm.initData();
  },
  computed: {}
};
</script>

<style lang="scss">
#courseware {
  .right_btn {
    background-image: url(../../assets/img/clue_manage/add_white.png);
  }
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .btn_user_defined {
    display: inline-block;
    width: 0.8rem;
    padding-left: 0.22rem;
    height: 0.36rem;
    line-height: 0.36rem;
    border-radius: 0.08rem;
    color: white;
    font-size: 0.16rem;
    cursor: pointer;
    letter-spacing: 0.03rem;
    background-color: #3885f8;
    position: relative;
    top: 0.01rem;
  }
  .btn_user_defined:hover {
    background-color: rgba(56, 133, 248, 0.8);
  }
  .line {
    text-decoration: underline;
    cursor: pointer;
    color: #3885f8;
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.title_tab {
  display: flex;
}
.title_item {
  font-size: 0.24rem;
  color: #999999;
  text-shadow: 0.01rem 0 0 currentcolor;
  line-height: 0.6rem;
  cursor: pointer;
}
.title_active {
  color: #141414;
}
</style>